@extends('admin.layout.min_main')

@section('content')
<style>
    .selected-btn{margin: 5px;}
</style>
<section class="content" style="width: 95%">
    <div class="row">
        <div class="col-md-10">
            <div class="box box-primary">
                <div class="box">
                    <div class="box-body table-responsive">
                        @foreach($list as $vo)
                            <div class="col-sm-3">
                                <input type="checkbox" name="role_id[]" data-desc="{{$vo->display_name}}" value="{{$vo->id}}" @if($vo->checked)checked="true"@endif/>{{$vo->display_name}}
                            </div>
                        @endforeach
                    </div>
                    <div style="margin: 10px 0px;">
                        <p>已选择：  </p>
                        <div class="selectedbtns">
                        </div>
                        <div>
                            <button type="button" class="btn btn-success btn-sm btn-block selected-btn" onclick="select_role();">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    var ids = new Set();
    $(function () {

        show_checked()

        $("input[name*='role_id']").change(function(){
            deal_select(this);
        });

        function show_checked(){
            $("input[type='checkbox']").each(function(){
                if($(this).val() != 0){
                    deal_select(this);
                }
            });
        }

        function deal_select(obj){
            if($(obj).is(':checked') == true){
                ids.add($(obj).val());
                select_show($(obj).val(), $(obj).data('desc'), 1);
            }else{
                ids.delete($(obj).val());
                select_show($(obj).val(), $(obj).data('desc'), 0);
            }
        }

        function select_show(id, desc, show){
            if(show){
                $('.selectedbtns').append('<button class="btn btn-primary btn-sm selected-btn selected'+id+'">'+desc+'</button>');
            }else{
                $('.selected'+id).remove();
            }
        }
    })
    function select_role()
    {
        var idStr = '';
        ids.forEach(function(item, sameItem, s) {
            idStr += item+",";
        });
        idStr = idStr.substr(0, idStr.length - 1);
        najax.post('/admin/user/attach', {'ids':idStr, 'user_id':'{{$user_id}}'}, function (res) {
            javascript:window.parent.call_back(1);
        });
    }
</script>
@endsection